<html>
<head>
<title>AJAX example</title>
<script type="text/javascript" src="../src/main/js/loader.js"></script>
<script type="text/javascript">

	load('core.ajax.Request');

	function init() {

		var xml = new core.ajax.Request('ajax/response.xml');
		xml.addRequestListener({
			onRequestComplete : function(request, response) {
				if ('OK' == response.status) {
					priceList('xml', response.items);
				}
			}
		});

		var json = new core.ajax.Request('ajax/response.json');
		json.addRequestListener({
			onRequestComplete : function(request, response) {
				if ('OK' == response.status) {
					priceList('json', response.items);
				}
			}
		});

		var html = new core.ajax.Request('ajax/response.html');
		html.addRequestListener({
			onRequestComplete : function(request, response) {
				document.getElementById('html').innerHTML = response;
			}
		});

		xml.send();
		json.send();
		html.send();
	}
	
	function priceList(id, items) {
		var html = '<table width="100%"><tr><th>Name</th><th>Price</th><th>Quantity</th></tr>';
		for (var i = 0; i < items.length; i++) {
			var item = items[i];
			html += ('<tr><th>' + item.name + '</th><th>' + item.price + '</th><th>' + item.quantity + '</th></tr>');
		}
		html += '</table>';
		document.getElementById(id).innerHTML = html;
	}
	
</script>
</head>

<body onload="init()">

<table width="100%" height="100%" border="1">
	<tr>
		<th><h3>XML Response</h3></th>
		<th><h3>JSON Response</h3></th>
		<th><h3>HTML Response</h3></th>
	</tr>
	<tr>
		<td valign="top" width="33%" id="xml"></td>
		<td valign="top" width="33%" id="json"></td>
		<td valign="top" width="33%" id="html"></td>
	</tr>
</table>

</body>
</html>